<template>
  <div id="app">
    <Header :seller="seller"></Header>
    <div class="tab-item">
      <div class="item"><router-link to="/Goods">商品</router-link></div>
      <div class="item"><router-link to="/Seller">商家</router-link></div>
      <div class="item"><router-link to="/Reating">评价</router-link></div>
      <!-- <van-tabs v-model="active" animated :line-width='70'>
        <van-tab v-for="item in titles" :to='item.link'
        :title="item.name" :key="item.id"></van-tab>
      </van-tabs> -->
    </div>
    <keep-alive>
    <router-view :goods="goods" :reating="reating" :seller="seller"></router-view>
    </keep-alive>
  </div>
</template>

<script>
import Header from '@/components/header/Header.vue'
import axios from 'axios'
// import axios from '../baseurl'

export default {
  data () {
    return {
      goods: [],
      reating: [],
      seller: {},
      titles: [{
        id: 1,
        name: '商品',
        link: '/Goods'
      }, {
        id: 2,
        name: '商家',
        link: '/Seller'
      }, {
        id: 3,
        name: '评价',
        link: '/Reating'
      }],
      active: 0
    }
  },
  created () {
    this.printdata()
  },
  methods: {
    printdata () {
      axios.get('api/data/data.json', { params: {} })
        .then((res) => {
        // console.log(res.data)
          this.goods = res.data.goods
          this.reating = res.data.ratings
          this.seller = res.data.seller
          console.log(this.goods)
        })
        .catch((error) => {
          console.log(error)
        })
    }
  },
  components: {
    Header
  }
}
</script>>

<style lang="scss" scoped>
#app {
  .tab-item {
    display: flex;
    border-bottom: 0.3px solid red;
    .item {
      flex: 1;
      text-align: center;
      line-height: 40px;
      .router-link-active {
        color: red;
      }
    }
  }
}
</style>
